<template>
  <view class="collect-box">
    <!-- <zdy-nav
      @getHeaderHeight="(hei) => (navHei = hei)"
      title="我的收藏"
    ></zdy-nav> -->
    <u-tabs :list="list" lineWidth="32rpx" lineHeight="10rpx" lineColor="#27AB9C" :current="current" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" :itemStyle="itemStyle" @change="changeIndex"></u-tabs>
    <view class="content">
      <LawsLibraryList :params="{
        status:0
      }" :style="{
          display: current ==  0 ? 'block' : 'none',
          height: '100%',
        }"></LawsLibraryList>
      <LawsLibraryList :params="{
        status:1
      }" :style="{
          display: current ==  1 ? 'block' : 'none',
          height: '100%',
        }"></LawsLibraryList>
      <LawsLibraryList :params="{
        status:2
      }" :style="{
          display: current ==  2 ? 'block' : 'none',
          height: '100%',
        }"></LawsLibraryList>
    </view>
  </view>
</template>

<script setup>
import LawsLibraryList from "./components/lawsLibraryList.vue";
// import { postFavoritePage } from "@/api/index";
// import { UserApi } from "@/api";
const queryParams = reactive({
  type: 1,
  categoryCode: "ALL",
});
const activeStyle = reactive({
  color: "#27AB9C",
  fontWeight: "bold",
  "font-size": "28rpx",
  color: "#27AB9C",
  "line-height": "48rpx",
});
const inactiveStyle = reactive({
  "font-weight": "400",
  "font-size": "28rpx",
  color: "#666666",
  "line-height": "48rpx",
});
const itemStyle = ref(
  "padding-left: 32rpx; padding-right: 32rpx; height: 108rpx;"
);

onLoad(() => {
  // UserApi.postUserOrderPage({
  //   "current": 0,
  //   "size": 0,
  //   "status": 0
  // })
})

const pageTitle = ref("");
const list = ref([
  // {
  //   name: "全部",
  //   type: "0",
  // },
  {
    name: "使用中",
    type: 0,
  },
  {
    name: "异常结束",
    type: 1,
  },

  {
    name: "已完成",
    type: 2,
  },
]);

const current = ref("0");
const changeIndex = (item) => {
  // debugger
  console.log("current.value", item);
  if (item.index == current.value) {
    return;
  }
  current.value = item.index;
};
</script>

<style lang="scss" scoped>
.collect-box {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .content {
    flex: 1;
    overflow: auto;
    // padding: 10rpx 0;
  }
  ::v-deep .u-tabs {
    background: #fff;
  }
  :deep(.u-tabs__wrapper__nav__line) {
    bottom: 0;
  }
}
</style>
